<%--
  Created by IntelliJ IDEA.
  User: 方少
  Date: 2018/7/17
  Time: 19:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/header.jsp"%>
<script type="application/javascript" src="/static/webjars/layui/layui.js" charset="utf-8"></script>


<div class="subfiled clearfix">
    <h2>出租房录入</h2>
</div>

<form class="layui-form" action="" style="margin-top: 20px;">

    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>户主姓名：</label>
        <div class="layui-input-block">
            <input type="text" name="userId" lay-verify="required" autocomplete="off" placeholder="请输入户主姓名" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><span style="color:red;">*</span>联系电话：</label>
            <div class="layui-input-inline">
                <input type="tel" name="tellphone" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red;">*</span>详细地址：</label>
        <div class="layui-input-inline">
            <select name="town" lay-verify="required" id="town" lay-fillter="town">
                <option value="" selected="" disabled="disabled"></option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="village" lay-verify="required" id="village" lay-filter="village">
                <option value="" selected="" disabled="disabled"></option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 300px">
            <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="详细地址" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>房型：</label>
        <div class="layui-input-block">
            <input type="text" name="houseType" lay-verify="required" autocomplete="off" placeholder="房型" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>楼层：</label>
        <div class="layui-input-block">
            <input type="text" name="floor" lay-verify="required " autocomplete="off" placeholder="楼层数" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>总楼层：</label>
        <div class="layui-input-block">
            <input type="text" name="floorCount" lay-verify="required " autocomplete="off" placeholder="总楼层数" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label">朝向：</label>
        <div class="layui-input-block">
            <select name="sunrise" lay-verify="required">
                <option value="" selected="" disabled="disabled"></option>
                <option value="向北">向北</option>
                <option value="向南">向南</option><!-- disabled = "" 则是不可选 -->
                <option value="向东">向东</option>
                <option value="向西">向西</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>房屋面积：</label>
        <div class="layui-input-block">
            <input type="text" name="areaBuild" lay-verify="required " autocomplete="off" placeholder="请输入房屋面积" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red;">*</span>房屋状态：</label>
        <div class="layui-input-block" style="width:300px;">
            <select name="status" lay-filter="aihao">
                <option value="" selected="" disabled="disabled"></option>
                <option value="正常">正常</option>
                <option value="出租">出租</option>
                <option value="求租">求租</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="width: 300px">
        <label class="layui-form-label"><span style="color:red;">*</span>出租价格：</label>
        <div class="layui-input-block" >
            <input type="text" name="price" lay-verify="required " autocomplete="off" placeholder="请输入价格" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item layui-form-text" style="width:400px">
        <label class="layui-form-label">装修情况：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="decorationStatus"></textarea>
        </div>
    </div>


    <div class="layui-form-item layui-upload">
        <label class="layui-form-label layui-btn" id="files">选择附件</label>
        <div class="layui-input-block">
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                    <tr><th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr></thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>


</form>


<%@ include file="../common/footer.jsp"%>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="application/javascript">
    var form = layui.form;
    var upload = layui.upload;

    //移除自带边框效果
    $("div").removeClass("iselect-wrapper");

    form.on('submit(demo1)', function (data) {

        //用户id
        data.field.province = "51";
        data.field.city = "5115";
        data.field.county = "511528";
        data.field.facilities = data.field.decorationStatus;
        data.field.filenumber = 1;
        data.field.village = data.field.village;
        //检测楼层
        if(parseInt(data.field.floor) > parseInt(data.field.floorCount)){
            alert("楼层数不能大于总楼层数！");
            return;
        }

        $.get("/ConfirmUser",{"UserName":data.field.userId,"TellPhone":data.field.tellphone},function(result){
            if(result == -1)
                layer.msg("用户名和电话不匹配");
            else{
                /////////////////提交操作///////////////
                data.field.userId = result;
                //alert(JSON.stringify(data.field));
                layer.msg("提交中");
                console.log(data.field);
                $.ajax({
                    url: "/ajax/save/cityhouseinfo",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    //设置请求头信息
                    dataType: "json",
                    data: JSON.stringify(data.field),
                    success: function (data) {
                        layer.msg(data.code);
                        nowtimestamp = (new Date()).getTime();
                    },
                    error: function (res) {
                        layer.msg(res);
                    }
                });

            }
        });

        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

    });

    var check;
    $.post("/ajax/pub/gettown",{code: "511528"},
        function (result) {
            //输出
            //执行清空
            $("#town").empty();
            $("#village").empty();
            for(i = 0; i < result.length; i++){
                document.getElementById("town").options.add(new Option(result[i].townName,result[i].townId));
            }
            form.render();


            setInterval(function(){
                if(check == undefined){
                    check = $('#town').val();
                    $.post("/ajax/pub/getvillage",{code: check},
                        function (result) {
                            //输出
                            //执行清空
                            $("#village").empty();
                            for(i = 0; i < result.length; i++){
                                document.getElementById("village").options.add(new Option(result[i].villageName,result[i].villageId));
                            }
                            form.render();
                        }
                    );
                }else if(check != ($('#town').val())){
                    check = $('#town').val();
                    $.post("/ajax/pub/getvillage",{code: check},
                        function (result) {
                            //输出
                            //执行清空
                            $("#village").empty();
                            for(i = 0; i < result.length; i++){
                                document.getElementById("village").options.add(new Option(result[i].villageName,result[i].villageId));
                            }
                            form.render();
                        }
                    );
                }
            },500);
        }
    );




    /*
    form.on('select(town)', function(data){
        alert("select");
        console.log(data.value);
        $.post("/ajax/pub/getvillage",{code: data.value},
            function (result) {
                //输出
                //执行清空
                $("#village").empty();
                for(i = 0; i < result.length; i++){
                    document.getElementById("village").options.add(new Option(result[i].villageName,result[i].villageName));
                }
                form.render();
            }
        );
    });*/


    /////////////////////////////////demoEnd////////////////////////////////////////////

</script>

<%--//文件上传--%>
<script type="application/javascript">
    //时间戳
    var nowtimestamp = (new Date()).getTime();
    //多文件列表
    var demoListView = $('#demoList')
        ,uploadListIns = upload.render({
        elem: '#files'
        ,url: '/api/spfile/upload'
        ,data: {
            tableName: '出租屋信息表',
            index: nowtimestamp
        }
        ,accept: 'file'
        // ,acceptMime: filetype
        ,multiple: true
        // ,number: 4
        ,auto: false
        ,bindAction: '#submit'
        ,choose: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                demoListView.append(tr);
            });
        }
        ,done: function(res, index, upload){
            if(res.code == 0){ //上传成功
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }else if(res.code == -1) {
                // layer.msg("文件类型不支持");
            }
            this.error(res, index, upload);
        }
        ,error: function(res, index, upload){
            var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
            if(res.code == -1){
                tds.eq(2).html('<span style="color: #FF5722;">文件类型不支持</span>');
            }else {
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            }
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });






</script>